<template>
  <section class="v-header" :style="{'height': height, 'line-height': height, 'background-color': getBg()}">
    <template v-if="_option">
      <section class="v-header-inner">
        <template v-if="layout === '1'">
          <van-icon class="icon-icon" name="arrow-left" :color="iconcolor" />
          <span class="etc" :style="{'color': textcolor}">{{ title || '' }}</span>
          <section v-if="isShowRightIcon === '1' && rightIcon" class="right-icon" @click="handleClickIcon">
            <van-image :src="rightIcon" :style="{'height': rightIconHeight, 'width': rightIconWidth}" />
          </section>
        </template>
        <template v-else>
          <van-image :height="logoheight" :width="logowidth" :src="logo" />
          <section class="header-right">
            <img src="" alt="">
            <span class="din-front header-jifen">10</span>
          </section>
        </template>
      </section>
    </template>
    <template v-else>
      <van-skeleton title :row="1" />
    </template>
    <van-dialog v-model="showDialog" :class-name="'headerDialog'" :show-cancel-button="false" :show-confirm-button="false" :get-container="getContainer">
      <div v-if="rightIconOper === '2' || rightIconOper === '3'" class="hint-box" @click.stop>
        <div class="content">
          <div class="c-title">
            温馨提示
          </div>
          <div class="c-content">
            排行榜每小时更新一次 <br> 如果您的{{ rightIconOper === "2" ? "分数" : "积分" }}和排行榜中不一致, <br> 请稍后再查看！
          </div>
          <div class="c-btn">
            <div class="btn" @click="showDialog = false">知道啦！</div>
          </div>
        </div>
      </div>
      <div v-if="rightIconOper === '1'" class="share-container" @click="showDialog = false">
        <img class="wx-share-tip-icon" :src="wxShareTipIcon" alt="">
        <img class="wx-share-tip-text" :src="wxShareTipText" alt="">
      </div>
    </van-dialog>
  </section>
</template>
<script>
import mixins from './../mixins'
import request from '@/utils/request'
import wxShareTipIcon from './images/wx-share-tip-icon.png'
import wxShareTipText from './images/wx-share-tip-text.png'
export default {
  name: 'VHeader',
  mixins: [mixins],
  inject: ['pageVar'],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      theme: 'theme-one',
      showDialog: false,
      wxShareTipIcon,
      wxShareTipText
    }
  },
  computed: {
    _option() {
      return this.option.layout
    },
    title() {
      if (this.option.title.startsWith('${')) {
        return this.isInitData ? this.varInfo[this.option.title] : this.pageVar().length > 0 ? this.pageVar().find(item => { return item.code === this.option.title })?.value : ''
      } else {
        return this.option.title || ''
      }
    },
    layout() {
      return this.option.layout || 1
    },
    textcolor() {
      return this.option.textcolor || '#333'
    },
    iconcolor() {
      return this.option.iconcolor || '#333'
    },
    height() {
      return this.px2rem(this.option.height || 88)
    },
    logo() {
      return this.option.logo
    },
    logoheight() {
      return this.px2rem(this.option.logoheight || 68)
    },
    logowidth() {
      return this.px2rem(this.option.logowidth || 430)
    },
    backType() {
      return this.option.backType || ''
    },
    backLink() {
      return this.option.backLink || ''
    },
    rightIcon() {
      return this.option.rightIcon || ''
    },
    rightIconOper() {
      return this.option.rightIconOper || ''
    },
    isShowRightIcon() {
      return this.option.isShowRightIcon || '2'
    },
    rightIconHeight() {
      return this.px2rem(this.option.rightIconHeight || 10)
    },
    rightIconWidth() {
      return this.px2rem(this.option.rightIconWidth || 10)
    }
  },
  async created() {
    if (this.isInitData) {
      await this.getTheme()
    }
  },
  methods: {
    getContainer() {
      return document.getElementById('appMaker')
    },
    getBg() {
      if (this.layout !== '1') {
        switch (this.theme) {
          case 'theme-one':
            return '#eb523c'
          case 'theme-two':
            return '#2f74eb'
          case 'theme-three':
            return '#2DA7B5'
          default:
            return '#eb523c'
        }
      } else {
        return '#fff'
      }
    },
    getTheme() {
      return new Promise((resolve, reject) => {
        request({
          baseURL: '/API-ENTERPRISE-APP/',
          url: 'app/sysConfig/getByName',
          method: 'post',
          data: {
            name: 'THEME_COLOR'
          }
        }).then(res => {
          this.theme = res.data.data.configValue
          resolve()
        }).catch(err => {
          resolve()
        })
      })
    },
    handleBack() {
      const { backType, backLink } = this
      if (backType === '1') {
        this.$router.back()
      } else {
        this.toDetail({}, '-1', backLink)
        /* if (backurl.startsWith('http')) {
          location.href = backurl
        } else {
          this.$router.push(backurl)
        }*/
      }
    },
    handleClickIcon() {
      return
      this.showDialog = true
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.v-header {
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  &-inner {
    height: 100%;
    box-sizing: border-box;
    padding: 0 rem(20);
    position: relative;
    .icon-icon {
      width: rem(32);
      position: absolute;
      left: rem(20);
      top: 50%;
      transform: translateY(-50%);
      font-size: rem(40);
    }
    > span {
      font-size: rem(34);
      font-weight: bold;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: rem(600);
    }
    .right-icon {
      position: absolute;
      right: rem(40);
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      /deep/ img {
        height: 100%;
        width: 100%;
      }
    }
    .header-right {
      position: absolute;
      right: rem(40);
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: rem(48);
        width: rem(48);
      }
      .header-jifen {
        font-size: rem(32);
        font-weight: bold;
        text-align: center;
        color: #ffffff;
      }
    }
    .van-image {
      vertical-align: middle;
    }
  }
}

.van-dialog.headerDialog {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  background-color: transparent;
  .share-container {
    position: absolute;
    top: rem(120);
    left: 0;
    right: 0;
    bottom: 0;
    .wx-share-tip-icon {
      width: rem(203);
      height: rem(146);
      position: absolute;
      right: rem(145);
      top: 0;
    }

    .wx-share-tip-text {
      width: rem(335);
      height: rem(132);
      position: absolute;
      top: rem(160);
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .hint-box{
    position: absolute;
    top: rem(120);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{
      width: rem(560);
      height: rem(430);
      background: #ffffff;
      border-radius: rem(20);
      display: flex;
      flex-direction: column;
      .c-title{
        height: rem(109);
        font-size: rem(34);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: center;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: rem(1) solid #eaeaea;
        box-sizing: border-box;
      }
      .c-content{
        flex: 1;
        font-size: rem(28);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: rem(52);
      }
      .c-btn{
        height: rem(120);
        .btn{
          margin: 0 auto;
          width: rem(400);
          height: rem(80);
          @include bg-color($mainColor);
          border-radius: rem(40);
          font-size: rem(32);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: center;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
